import { useEffect } from 'react';
import { Input, Toast, Form } from 'antd-mobile';
import { getMessage } from '@inbiz/react';
import { jumpToLogin } from '@inbiz/utils';
import Cookies from 'js-cookie';

// @ts-ignore
import styles from '../style.less';
import { setPassword, WebCore } from '../service'
import Top from '../top';
const tokenName = InbizConfig.tokenName
interface Props {
  /**
   * 多语言
   */
  lang?: string;
  pwdData: {
    length: number;
    enableEditUserInfo: boolean;
    enableEditPwd: boolean;
  };
}

/**
 * Password 组件
 */
const Password = (props: Props) => {
  const [form] = Form.useForm();
  const { pwdData } = props;
  const { validateFields, getFieldValue, setFieldsValue, getFieldsValue } = form;

  const setOldPassword = (val: any) => {
    // validateFields((error, values) => {
    //   if (val != '111111') {
    //     Toast.info('密码输入错误');
    //     setFieldsValue({ oldPassword: '' });
    //   }
    // });
  };
  const setNewPassword = (val: any) => {
    if (val.target.value && val.target.value == getFieldValue('oldPassword')) {
      Toast.show({ content: getMessage('personalInfo.samePassword') });
      setFieldsValue({ newPassword: '' });
    }
  };
  const confirmPassword = (val: any) => {
    if (val.target.value && val.target.value !== getFieldValue('newPassword')) {
      Toast.show({ content: getMessage('personalInfo.notSamePassword') });
      setFieldsValue({ conformPassword: '' });
    }
  };
  const confirmNewPassword = () => {
    validateFields().then((res) => {
      const values = getFieldsValue();
      setPassword({
        oldPwd: values.oldPassword,
        newPwd: values.newPassword,
        newPwd2: values.conformPassword,
      }).then((res) => {
        if (res.status == 0) {
          let params = {
            module: 'OrgnizationManager',
            fun: 'UserLogout',
          };
          WebCore(params).then((res: any) => {
            if (res.result == 0) {
              Cookies.remove(tokenName, { path: '/' });
              jumpToLogin(res?.loginurl || '/api/auth/login');
              return;
            }
          })
        }
        Toast.show({ content: res.result });
      });
    });
  };

  useEffect(() => {
    if (!pwdData.enableEditPwd) {
      Toast.show({ content: getMessage('personalInfo.notAllowedPassword') });
    }
  }, []);

  return (
    <div className={styles.InbizInfomation}>
      <Top
        onClick={confirmNewPassword}
        title={getMessage('personalInfo.editPassword')}
        operationTitle={getMessage('personalInfo.compolete')}
        disabled={!pwdData.enableEditPwd}
      />
      <Form
        layout="horizontal"
        onFinish={confirmNewPassword}
        form={form}
        className={styles.pwdList}
      >
        <Form.Item
          name="oldPassword"
          label={getMessage('personalInfo.oldPassword')}
          rules={[{ required: true, message: getMessage('personalInfo.oldPasswordEmpty') }]}
        >
          <Input
            disabled={!pwdData.enableEditPwd}
            type="password"
            placeholder={getMessage('personalInfo.imputOldPassword')}
            onBlur={setOldPassword}
          />
        </Form.Item>
        <Form.Item
          name="newPassword"
          label={getMessage('personalInfo.newPassword')}
          rules={[
            { required: true, message: getMessage('personalInfo.newPasswordEmpty') },
            {
              pattern: /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/,
              message: getMessage('personalInfo.passwordTips'),
            },
            {
              type: 'string',
              min: pwdData.length,
              message: `${getMessage('personalInfo.minLength')}${pwdData.length}`,
            },
          ]}
        >
          <Input
            type="password"
            placeholder={getMessage('personalInfo.imputNewPassword')}
            onBlur={setNewPassword}
            minLength={pwdData.length}
            disabled={!pwdData.enableEditPwd}
          />
        </Form.Item>
        <Form.Item
          name="conformPassword"
          label={getMessage('personalInfo.confirmPassword')}
          rules={[{ required: true, message: getMessage('personalInfo.confirmPasswordEmpty') }]}
        >
          <Input
            disabled={!pwdData.enableEditPwd}
            type="password"
            placeholder={getMessage('personalInfo.newPasswordAgain')}
            onBlur={confirmPassword}
          />
        </Form.Item>
      </Form>
    </div>
  );
};

export default Password;
